import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Descriptions, Tag, Button, Table, Pagination, Spin,Skeleton } from 'antd';
import { getSingleMerchant,getMerchantOrders } from '../../api/merchant';
import React from "react";
const PAGE_SIZE = 5;
const Detail = () => {
    const [detail, setDetail] = useState([]);
    const [orderDetail,setorderDetail]=useState([]);
    const [spinning, setSpinning] = React.useState(false);//加载中
    const location = useLocation();
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [loading, setLoading] = React.useState(true);
    const data = async () => {
        setSpinning(true);
        await getSingleMerchant({
            id: location.pathname.slice(17),
        }).then((res) => {
            if (res.result === 0) {
                setSpinning(false);
                setDetail(res.data);
                setLoading(false)
            }
        });
    };
    useEffect(() => {
        const orderData = async () => {
            setSpinning(true);
            await getMerchantOrders({
                id: location.pathname.slice(17),
                page: currentPage,
                limit: PAGE_SIZE,
                
            }).then((res)=>{
                if(res.result===0){
                     setSpinning(false);
                     setorderDetail(res.data.data)
                     setTotal(res.data.total);
                }
            })      
        }
        data();
        orderData();
    }, [currentPage]);
    
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };


    const items = [
        {
            label: '姓名',
            children: <Tag color='blue'>{detail.name}</Tag>,
        },
        {

            label: '账号',
            children: <Tag color='blue'>{detail.account}</Tag>,
        },
        {

            label: '激活',
            children: <Tag color={detail.isActive === 1 ? 'success' : 'warning'}>{detail.isActive === 1 ? "是" : "否"}</Tag>,
        },
        {

            label: '禁用',
            children: <Tag color={detail.isBan === 1 ? 'red' : 'success'}>{detail.isBan === 1 ? "是" : "否"}</Tag>,
        },
       
        {

            label: '订单数',
            children: <Tag color='blue'>{detail.orderCount}</Tag>,

        },
        {

            label: '已完成订单',
            children: <Tag color='blue'>{detail.completeOrderCount}</Tag>,
        },
        {

            label: '已取消订单',
            children: <Tag color='blue'>{detail.cancelOrderCount}</Tag>,
        },
        {

            label: '购买商品总数量',
            children: <Tag color='blue'>{detail.buyCount}</Tag>,
        },
        {

            label: '成交金额',
            children: <Tag color='red'>￥{detail.currMoney}</Tag>,
        },
        {

            label: '订单总金额',
            children: <Tag color='red'>￥{detail.money}</Tag>,
        },
        {

            label: '取消金额',
            children: <Tag color='blue'>￥{2017.00}</Tag>,
        },
        {

            label: '添加时间',
            children: <Tag color='blue'>{detail.time}</Tag>,
            
        },
        
    ]
    const orders = [
        {
            title: "序号",
            width:70,
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '订单',
            dataIndex: 'id',

        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',

        },
        {
            title: '商户',
            dataIndex: 'merchant',
        },
        {
            title: '商品',
            dataIndex: 'goodsNames',
        },
        {
            title: '数量',
            dataIndex: 'goodsCount',
        },
        {
            title: '金额',
            dataIndex: 'currMoney',
            render:(_,record)=>{
               return <Tag color='error'>{record.currMoney}</Tag>
            }
        },
        {
            title: '时间',
            dataIndex: 'time',
        },
      
        {
            title: '操作',
            dataIndex: 'address',
            width: '250px',
            fixed: "right",
            render: () => (
                <span>
                    <Button type="primary" ghost>详情</Button>
                </span>
            )
        },
    ];


    return (
        <div className="container">
            <Skeleton  paragraph={{ rows: 10 }} active  loading={loading} >
            <div className="content">
                <div>
                    <Descriptions title="商户详情" bordered items={items} layout='vertical' className="bold-label" labelBg='rgba(0,0,0,0.88)' />
                </div>
                <div style={{ marginTop: 20, marginBottom: 10 }}>
                <span className="Sales1">订单列表</span>
                <div className="table" style={{ marginTop: 10 }}>
                    <Table
                        columns={orders}
                        dataSource={orderDetail}
                        bordered
                        pagination={false}
                    />
                </div>
                <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
            </div>
            </div>
            </Skeleton>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    )
}

export default Detail;